This is a very simple Javascript toggle that'll show or hide a div depending on its current state. Here is the HTML code:
<div onmouseover="toggle('mydiv');" onmouseout="toggle('mydiv');">Hover</div>
<div id='mydiv' style="visibility: hidden;">I see you!</div>
function toggle(obj) {
var item = document.getElementById(obj);
if(item.style.visibility == 'visible') { item.style.visibility = 'hidden'; }
else { item.style.visibility = 'visible'; }
}
jquery is much more efficient with this imo, since you have it, you should use it =p
<button>You cant see <div style='visibility:hidden;'>this</div></button>
<script>
$('button').hover(function(){jQuery(":first-child", this).css('visibility', 'visible');},function(){jQuery(":first-child", this).css('visibility', 'hidden');});</script>
The cool thing about this is the wide range of customization:
<table cellpadding=0 cellspacing=0><tr class='hov'><td>PLATFORMS</td><td style='width:30px; height:30px;'><img class='hidden' src='http://www.hawkee.com/images/bullet_arrow_down.png' /></td></tr></table>
OR
<div class='hov'>Hover<div class='hidden'>I see you!</div></div>
$(document).ready(function() {
$('.hidden').hide();
$('.hov').hover(function(){jQuery(".hidden",this).fadeIn();},function(){jQuery(".hidden",this).fadeOut();});
});
live example at http://left4quake.com/this.html
you'll find jquery is the best =]
outcome = unobtrusive lightweight effective dynamic code, also a really cool effect.